<template>
	<view class="content">
		<view class="header">
			<view class="userInfo">
				<view class="Info" style="height:140rpx;display: flex;flex-direction: row;">
					<view class="icon">
						<image :src="userInfo.avatar" alt="" style="height: 140rpx;margin: 0 40rpx;" mode="heightFix">
					</view>
					<view>
						<view style="color: #fff;font-weight: bold;padding: 10rpx 0;font-size: 36rpx;">{{userInfo.name}}
						</view>
						<view style="color: #fff;font-weight: bold;padding: 10rpx 0;">
							{{userInfo.mobile}}
						</view>
					</view>
				</view>
			</view>
			<view class="inner">
				<view v-for="(item,index) in prizeData.prizeList" :key="index">
					<view class="pic" style="border-radius: 30rpx;">
						<view v-if="index!=0" class="addoff" @click="addoff(index)">×</view>
						<image @click="choosepic(index)" :src="item.prizesImage" alt="" mode="heightFix">
					</view>
					<view class="name">
						{{prizeLV[index]}}: <view><input type="text" placeholder="请填写奖品名称" v-model="item.prizesName" />
						</view>
					</view>
					<view class="count">
						奖品数量: <view><input type="text" placeholder="奖品数量" v-model="item.prizesSum" /></view>
					</view>
				</view>
				<button class="add-button" @click="addFormItem" v-if="addId<3">+新增奖品</button>
				<view class="type">
					<picker mode="selector" :range="options" @change="onPickerChange">
						<view class="picker">
							{{type}}
						</view>
					</picker>
				</view>

				<view class="type_sec">
					<TimePicker v-if="type==='定时开奖'" @prizetime='handleChildtime()'></TimePicker>
					<input v-if="type==='满人开奖'" type="text" v-model="prizeData.lotteryNumpeo" placeholder="人数上限">
				</view>
				<view class="type">
					<picker mode="selector" :range="options_2" @change="onPickerChange2">
						<view class="picker">
							{{type2}}
						</view>
					</picker>
				</view>
				<view class="type_sec">
					<view style="margin-top: 1vh;" v-if="type2==='快递邮寄'">
						<u-alert-tips type="warning" description="领奖时可填写收货信息"></u-alert-tips>
					</view>
					<input v-if="type2==='到店领奖'" type="text" v-model="prizeData.lotteryAddress" placeholder="门店名称">
					<view class="contact-me" v-if="type2==='联系我领奖'">
						<view class="left">
							上传微信二维码
						</view>
						<view class="right">
							<u-upload :max-count="1" :show-progress="false" width="150" height="150" :action="uploadUrl"
								@on-success="onUploadQRCode" @on-list-change="qrCodeChange"></u-upload>
						</view>
					</view>
				</view>
				<view class="textarea">
					<view class="tit">
						抽奖说明<view class="rt">T</view>
					</view>
					<textarea v-model="prizeData.prizesDescription" placeholder="请输入文字" />
				</view>
				<view class="setting-item-wz">
					<text style="font-weight: bold;">限制地区范围</text>
					<u-subsection style="width: 340rpx;" :list="[{name: '不限制'}, {name: '地区'}, {name: '范围'}]"
						:current="designatedAreaCurrent" @change="designatedAreaCurrentChange"></u-subsection>
				</view>
				<view v-if="designatedAreaCurrent!=0" class="setting-item"
					style="display: flex;flex-direction: row;white-space: nowrap;margin-bottom: 0rpx;">
					<text style="font-weight: bold;">地区：</text>
					<text style="color: #ccc;width: 300rpx;">{{ prizeData.designatedArea }}</text>
					<text v-if="prizeData.designatedArea!=''" @click="offLocal"
						style="background-color: red;color: #fff;border-radius: 10%;text-align: center;font-size: 24rpx;padding: 0 5rpx;">取消</text>
					<text style="float: right;" @click="getAddress">选择城市</text>
				</view>
				<view v-if="designatedAreaCurrent==2" class="setting-item"
					style="display: flex;flex-direction: row;white-space: nowrap;justify-content: space-between;">
					<text style="font-weight: bold;">范围：</text>
					<input type="number" v-model="prizeData.lotteryNumpeo" placeholder="最少不低于50米">
				</view>
				<view></view>

				<view style="padding: 2vh 0;">显示设置</view>
				<view class="setting-item">
					<text>隐藏奖品数量 (VIP可见)</text>
					<switch :checked="isHidePrizeQuantityEnabled" @change="toggleHidePrizeQuantity"></switch>
					<!-- <text v-if="isHidePrizeQuantityEnabled && !isVIP" class="vip-info">仅VIP会员可见</text> -->
					<view style="font-size: 28rpx;color: #ccc;padding-top: 1vh;">开启后，在抽奖页不展示奖品数量</view>
				</view>
				<view class="setting-item">
					<text>隐藏参与人数 (VIP可见)</text>
					<switch :checked="isHideParticipantCountEnabled" @change="toggleHideParticipantCount"></switch>
					<!-- <text v-if="isHideParticipantCountEnabled && !isVIP" class="vip-info">仅VIP会员可见</text> -->
					<view style="font-size: 28rpx;color: #ccc;padding-top: 1vh;">开启后，在抽奖页不展示参与人数</view>
				</view>
				<view class="setting-item">
					<text>隐藏中奖名单 (VIP可见)</text>
					<switch :checked="isHideWinningListEnabled" @change="toggleHideWinningList"></switch>
					<view style="font-size: 28rpx;color: #ccc;padding-top: 1vh;">开启后，参与者只能看到自己的中奖记录</view>
				</view>

				<view class="setting-item">
					<text>开启看广告抽奖</text>
					<switch :checked="isHideWinningListEnabled" @change="toggleHideWinningTv"></switch>
					<view style="font-size: 28rpx;color: #ccc;padding-top: 1vh;">开启后，参与者看一段广告后才能抽奖</view>
				</view>
				<view class="setting-item">
					<text>防止统一用户高频中奖 </text>
					<switch :checked="isHideWinningListEnabled" @change="toggleHideWinningList"></switch>
					<!-- <text v-if="isHideWinningListEnabled && !isVIP" class="vip-info">仅VIP会员可见自己的中奖记录</text> -->
					<view style="font-size: 28rpx;color: #ccc;padding-top: 1vh;">降低近期中奖用户的中奖率，防止重复中奖</view>
				</view>
				<view class="speace"></view>
			</view>

		</view>
		<view class="bottom">
			<view @click="upPrize()">发起抽奖</view>
		</view>
	</view>
</template>

<script>
	import TimePicker from './components/timepicker.vue'

	export default {
		components: {
			TimePicker
		},
		onShow() {

		},
		data() {
			return {
				uploadUrl: this.$api.uploadImg,
				options: ['定时开奖', '即抽即开', '满人开奖'],
				options_2: ['快递邮寄', '到店领奖', '联系我领奖'],
				prizeLV: ['一等奖', '二等奖', '三等奖'],
				type: '请选择开奖方式',
				type2: '请选择领奖方式',
				selectedIndex: 0, // 默认选中项的索引
				addId: 1,
				userInfo: {},
				designatedAreaCurrent: 0,
				prizeData: {
					prizeList: [{
						prizesImage: 'https://pic.rmb.bdstatic.com/99fbd95e77033b6ee8e3cce58900591f.jpeg',
						prizesName: '',
						prizesSum: 1,
						prizesGrade: 0,
					}, ],
					lotteryType: 1, // 默认显示文本',
					lotteryTime: '',
					prizesDescription: '',
					lotteryNumpeo: '',
					claimMethods: '',
					start: 1,
					lotteryAddress: "",
					designatedArea: '',
					showNumber: 0,
					showPeople: 0,
					playTv: 0,
					contactUsWximage: ""
				},
			}
		},
		onShow() {
			this.showTan()
			this.firstgettime()
			this.getInfo()
		},
		updated() {
			console.log(this.prizeData);
		},
		methods: {
			// 获取用户信息
			getInfo() {
				this.$api.request({
					url: this.$api.getInfo
				}).then((res) => {
					console.log(res);
					if (res.code == 200) {
						this.userInfo = res.data
					}
				})
			},
			onUploadQRCode(data, index, lists, name) {
				if (!data.url) {
					return;
				}
				this.prizeData.contactUsWximage = data.url;
			},
			qrCodeChange(lists, name) {
				if (lists.length == 0) {
					this.prizeData.contactUsWximage = "";
				}
			},
			// 展示模态框
			showTan() {
				// let hasShown = uni.getStorageSync('hasShow')
				// if (!hasShown) {
				// 	uni.showModal({
				// 		title: '免责声明',
				// 		content: '我们仅提供发起及参与抽奖的平台，不对第三方发起人行为承担责任，所有抽奖奖品均由发起者提供并发放;本平台会在法律范围内尽可能地规范、督促用户遵守相关法律和平台使用规则，营造一个良好的公平的抽奖平台给用户',
				// 		confirmText: '我知道了',
				// 		showCancel: false,
				// 	})
				// 	uni.setStorageSync('hasShow', 'true')
				// }
			},

			addFormItem() {
				this.addId++
				this.prizeData.prizeList.push({
					prizesImage: 'https://pic.rmb.bdstatic.com/99fbd95e77033b6ee8e3cce58900591f.jpeg',
					prizesName: '',
					prizesSum: 1,
					prizesGrade: this.addId - 1,
				});
			},
			addoff(index) {
				this.prizeData.prizeList.splice(index, 1)
				this.prizeData.prizeList = this.prizeData.prizeList.map((item, index) => {
					item.prizesGrade = index;
					return item;
				})
				this.addId--
			},
			choosepic(index) {
				console.log(index, '选择图片');
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],
					sourceType: ['album', 'camera'],
					success: (res) => {
						console.log(res, '成功');
						// tempFilePaths 是图片文件的临时路径列表
						let tempFilePaths = res.tempFilePaths;
						console.log(tempFilePaths[0], '22222');
						uni.uploadFile({
							url: this.$api.uploadPic,
							filePath: tempFilePaths[0],
							name: 'file',
							success: (uploadFileRes) => {
								console.log(uploadFileRes.data, '111111111');
								let imgfile = JSON.parse(uploadFileRes.data).url
								this.prizeData.prizeList[index].prizesImage = imgfile;

							},
							fail: (res) => {
								console.log(res, '失败信息');
							}
						});

					},
				})
			},
			onPickerChange(e) {
				const index = e.mp.detail.value; // 获取选中项的索引
				this.type = this.options[index]
				this.prizeData.lotteryType = index; // 更新显示文本
			},
			onPickerChange2(e) {
				const index = e.mp.detail.value; // 获取选中项的索引
				this.type2 = this.options_2[index]
				this.prizeData.claimMethods = index; // 更新显示文本
			},
			handleChildtime(data) {
				this.prizeData.lotteryTime = data
			},
			getAddress() {
				uni.chooseLocation({
					type: 'wgs84',
					geocode: true,
					success: (res) => {
						console.log('当前位置的经度：' + res.longitude);
						console.log('当前位置的纬度：' + res.latitude);
						console.log('当前城市：' + res.address);
						this.prizeData.longitude = `${res.longitude}`
						this.prizeData.latitude = `${res.latitude}`

						this.$api.request({
							url: this.$api.actaddress + `?longitude=${this.prizeData.longitude}` +
								`&latitude=${this.prizeData.latitude}`
						}).then((res) => {
							// console.log(res.data);
							this.prizeData.designatedArea = res.data.province + res.data.city
							console.log('调用成功');
						})
					}
				})
			},
			// 清除地址信息
			offLocal() {
				this.prizeData.longitude = ''
				this.prizeData.letitude = ''
				this.prizeData.designatedArea = ''
			},
			toggleHidePrizeQuantity(e) {
				if (e.target.value) {
					this.prizeData.showNumber = 0
				} else {
					this.prizeData.showNumber = 1
				}

			},
			toggleHideParticipantCount(e) {
				if (e.target.value) {
					this.prizeData.showPeople = 0
				} else {
					this.prizeData.showPeople = 1
				}
			},

			toggleHideWinningTv(e) {
				console.log(e.target.value, '现在的状态');
				if (e.target.value) {
					this.prizeData.playTv = 0
				} else {
					this.prizeData.playTv = 1
				}
			},
			// 上传抽奖
			upPrize() {
				let a = this.prizeData
				if (a.prizesName != '' && a.prizesSum != '') {
					if (this.type != '请选择开奖方式') {
						if (a.lotteryType == 0 && a.lotteryTime == '') {
							uni.showToast({
								icon: 'error',
								title: '请选择发奖时间'
							})
						} else {
							uni.showModal({
								title: "提示",
								content: "是否发布本次抽奖？",
								success: (res) => {
									if (res.confirm) {
										this.$api.request({
											url: this.$api.upprize,
											method: 'POST',
											data: this.prizeData
										}).then(res => {
											if (res.code == 200) {
												console.log(res, '请求');
												uni.showToast({
													title: '发布奖品成功'
												})
												setTimeout(() => {
													uni.switchTab({
														url: '/pages/index/index' // 根据你的实际首页路径进行修改
													});
												}, 2000)
											}
										})
									}
								},
								fail: () => {
									return
								}
							})
						}
					} else {
						uni.showToast({
							icon: 'error',
							title: '请选择开奖方式'
						})
					}
				} else {
					uni.showToast({
						icon: 'error',
						title: '必要信息缺失'
					})
				}
			},

			formatDate(date) {
				const year = date.getFullYear();
				const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始，所以要加1，并且保证是两位数
				const day = String(date.getDate()).padStart(2, '0'); // 保证是两位数
				const hours = String(date.getHours()).padStart(2, '0'); // 保证是两位数
				const minutes = String(date.getMinutes()).padStart(2, '0'); // 保证是两位数

				return `${year}-${month}-${day} ${hours}:${minutes}`;
			},
			firstgettime() {
				const now = new Date();
				this.prizeData.lotteryTime = this.formatDate(now);
				console.log(this.prizeData.lotteryTime, '首次获取时间');
			},
			designatedAreaCurrentChange(index) {
				this.designatedAreaCurrent = index;
			}
		},
	}
</script>

<style lang="less" scoped>
	.content {
		width: 100%;
		height: 100vh;
		overflow: scroll;

		.header {
			width: 100%;
			height: 32vh;
			padding-top: 3vh;
			background: linear-gradient(to bottom, red, orange);

			.inner {
				padding: 20rpx 40rpx;
				border-radius: 3vw 3vw 0 0;
				overflow: hidden;

				.add-button {
					margin-top: 10rpx;
				}

				.contact-me {
					margin-top: 1vh;
					display: flex;
					justify-content: space-between;
					align-items: center;
					background-color: #FFF;
					padding: 0 3%;
				}

				.pic {
					width: 100%;
					height: 25vh;
					padding-top: 1vh;
					background-color: #fff;
					display: flex;
					flex-direction: row;
					justify-content: space-around;
					position: relative;


					.addoff {
						font-weight: bold;
						position: absolute;
						width: 60rpx;
						height: 60rpx;
						border-radius: 50%;
						text-align: center;
						line-height: 50rpx;
						font-size: 60rpx;
						right: 20rpx;
						top: 10rpx;
						background-color: #ccc;
					}


					image {
						border-radius: 40rpx;
						height: 100%;
					}
				}

				.name,
				.count,
				{
				width: 100%;
				margin-top: 1vh;
				padding: 0 3%;
				height: 10vh;
				font-size: 36rpx;
				line-height: 10vh;
				background-color: #fff;

				view {
					float: right;
					display: inline-block;
					height: 100%;

					input {
						display: inline;
						line-height: 10vh;
					}
				}
			}


			.type {
				width: 100%;
				margin-top: 1vh;
				padding: 0 3%;
				height: 10vh;
				font-size: 36rpx;
				line-height: 10vh;
				background-color: #fff;
				text-align: center;
			}

			.type_sec {
				input {
					width: 90%;
					margin-top: 1vh;
					padding: 0 5%;
					height: 10vh;
					font-size: 36rpx;
					line-height: 10vh;
					background-color: #fff;
				}
			}

			.addFrom {
				width: 94%;
				margin-top: 1vh;
				padding: 0 3%;
				height: 6vh;
				font-size: 36rpx;
				line-height: 6vh;
				text-align: center;
				background-color: #fff;
				color: orange;
			}

			.textarea {
				background-color: #fff;
				width: 100%;
				margin-top: 2vh;
				border-radius: 3vw 3vw 0 0;

				.tit {
					width: 97%;
					padding-left: 3%;
					height: 8vh;
					line-height: 8vh;
					font-weight: bold;
					font-size: 40rpx;

					.rt {
						float: right;
						height: 100%;
						line-height: 6vh;
						margin-right: 3vw;
						font-size: 45rpx;
						color: #bbb;
					}
				}

				textarea {
					width: 96%;
					height: 20vh;
					padding: 2%;
					font-size: 36rpx;

				}
			}
		}
	}



	.setting-item {
		margin-bottom: 20px;
		// display: flex;
		// align-items: center;
		background-color: #fff;
		position: relative;
		padding: 1vh;
	}

	.setting-item-wz {
		margin-top: 20px;
		background-color: #fff;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 1vh;
	}

	.setting-item text {
		// flex: 1;
	}

	.setting-item switch {
		position: absolute;
		right: 2vh;
		top: 2vh;
		// float: 1;
		// margin-left: 10px;
	}

	.vip-info {
		color: red;
		font-size: 12px;
		margin-left: 10px;
	}

	.speace {
		height: 20vh;
	}


	.bottom {
		position: fixed;
		bottom: 0;
		width: 100%;
		height: 10vh;
		background-color: #fff;
		z-index: 1000;

		view {
			width: 70%;
			height: 6vh;
			margin: 0 auto;
			text-align: center;
			line-height: 6vh;
			color: #fff;
			border-radius: 3vh;
			font-size: 2.5vh;
			background: linear-gradient(to right, red, orange);
		}
	}
	}
</style>